<template>
	<view class="rewardDeatil">
		<view class="tabBar">
			<view class="tabItem" :class="{ active: index == 1 }" @click="toggle(1)">订单明细</view>
			<view class="tabItem" :class="{ active: index == 2 }" @click="toggle(2)">奖励明细</view>
		</view>
		<block v-if="index == 1">
			<view class="list_box" v-for="(item, index) in list" :key="index">
				<view class="top_box">
					<view class="head">
						<view class="left_txt" v-if="item.order_type == 'goods'">
							{{ item.send_type == 0 ? '物流发货' : item.send_type == 1 ? '商家配送' : item.send_type == 2 ? '到店自提' : item.send_type == 3 ? '礼服预约' : '' }}-{{
								item.is_prepay == 1 ? '定金支付' : item.is_prepay == 0 ? '全款支付' : ''
							}}
						</view>
						<view class="left_txt" v-if="item.order_type == 'package'">{{ item.is_prepay == 1 ? '定金支付' : item.is_prepay == 0 ? '全款支付' : '' }}</view>
						<view class="right_box">订单编号：{{ item.order_no }}</view>
					</view>
					<view class="body">
						<view class="left_txt">
							<image class="pic" :src="item.ordergoods[0].image_src"></image>
							<view class="title">{{ item.order_type == 'goods' ? item.ordergoods[0].difference + ' ' + item.ordergoods[0].title : item.ordergoods[0].title }}</view>
						</view>
						<view class="right_box">
							<view class="pirce">￥{{ item.ordergoods[0].price }}</view>
							<view class="num">共{{ item.ordergoods[0].number }}件</view>
						</view>
					</view>
				</view>
				<view class="bottom_box">
					<view class="flex-item">
						<view class="title">购买者：</view>
						<view class="content">{{ item.username }}</view>
					</view>
					<view class="flex-item">
						<view class="title">订单状态：</view>
						<view class="content red">{{ item.status_text }}</view>
					</view>
					<view class="flex-item">
						<view class="title">成交金额：</view>
						<view class="content">¥ {{ item.pay.actual_payment }}</view>
					</view>
					<view class="flex-item" v-if="item.is_prepay == 1">
						<view class="title">剩余尾款：</view>
						<view class="content">¥ {{ item.is_confirm ? 0 : item.pay.sy_price }}</view>
					</view>
					<view class="flex-item" v-if="item.is_prepay == 0">
						<view class="title">支付时间：</view>
						<view class="content">{{ item.paymenttime ? get_datesForDian(item.paymenttime) : '' }}</view>
					</view>
					<view class="flex-item">
						<view class="title">推荐人：</view>
						<view class="content">{{ item.referrer.name }}</view>
					</view>
					<view class="flex-item" v-if="item.is_prepay == 1">
						<view class="title">支付时间：</view>
						<view class="content">{{ item.paymenttime ? get_datesForDian(item.paymenttime) : '' }}</view>
					</view>
				</view>
			</view>
		</block>
		<block v-if="index == 2">
			<view class="list_box" v-for="(item, index) in list" :key="index">
				<view class="top_box">
					<view class="head">
						<view class="left_txt">返利金额：¥ {{ item.money }}</view>
						<view class="right_box">提现日期：{{ item.withdrawal_time || '暂无提现日期' }}</view>
					</view>
				</view>
				<view class="bottom_box">
					<view class="flex-item" style="width: 60%">
						<view class="title" style="width: 120rpx">订单编号：</view>
						<view class="content">{{ item.order.order_no }}</view>
					</view>
					<view class="flex-item" style="width: 40%">
						<view class="title" style="width: 120rpx">推荐人：</view>
						<view class="content">{{ item.user.name }}</view>
					</view>
					<view class="flex-item" style="width: 60%">
						<view class="title" style="width: 120rpx">订单时间：</view>
						<view class="content">{{ item.order.createtime_text }}</view>
					</view>
					<view class="flex-item" style="width: 40%">
						<view class="title" style="width: 120rpx">下单人：</view>
						<view class="content">{{ item.order.username }}</view>
					</view>
				</view>
			</view>
		</block>
		<view class="empty" v-if="!list.length">暂无数据</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			index: 1,
			type: 'forward',
			height: '0rpx',
			margin: '0rpx',
			shop_id: null,
			detail: {},
			list: [],
			page: 1,
			totalNum: '',
			type: 0
		};
	},
	onLoad(options) {
		this.detail = JSON.parse(decodeURIComponent(options.item));
		this.type = options.level;
		this.shop_id = options.shopId;
		this.getData();
		uni.setNavigationBarTitle({
			title: this.detail.nickname // 页面标题文本
		});
	},
	onReachBottom() {
		if (this.page >= this.totalNum) {
			this.$wanlshop.msg('我是有底线的!');
		} else {
			this.page++;
			this.getData();
		}
	},
	methods: {
		toggle(n) {
			this.index = n;
			this.list = [];
			this.getData();
		},
		// 订单明细
		getData() {
			this.$request({
				url: 'manage/getOrders',
				data: {
					type: this.index,
					referrer_id: this.detail.user_id,
					referrer_level: this.type,
					offset: this.page,
					shop_id: this.shop_id
				}
			}).then((res) => {
				const { data, code, msg } = res.data;
				if (code == 1) {
					this.totalNum = data.total;
					this.list = this.page == 1 ? (data.data ? data.data : []) : this.list.concat(data.data);
				} else {
					uni.showToast({
						title: msg,
						icon: 'error'
					});
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.rewardDeatil {
	.tabBar {
		display: flex;
		align-items: center;
		height: 90rpx;
		background-color: #fff;
		.tabItem {
			width: 50%;
			height: 100%;
			text-align: center;
		}
		.active {
			position: relative;
			z-index: 1;
			&::after {
				position: absolute;
				left: 0;
				bottom: 0;
				content: '';
				width: 100%;
				height: 2rpx;
				background-color: #333;
				z-index: 2;
			}
		}
	}
	.list_box {
		width: 100%;
		padding: 20rpx 32rpx;
		margin-top: 20rpx;
		background-color: #fff;
		box-sizing: border-box;

		.top_box {
			width: 100%;
			border-bottom: 2upx solid #f4f4f4;
			padding: 4rpx 0 24rpx;
			box-sizing: border-box;
			.head {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 36rpx;
				.left_txt {
					color: #333;
					font-size: 26rpx;
					font-weight: bold;
				}

				.right_box {
					font-size: 24rpx;
					color: #888;
				}
			}

			.body {
				padding-top: 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.left_txt {
					flex: 1;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
				.pic {
					width: 116rpx;
					height: 116rpx;
					background: #454545;
					border-radius: 10rpx;
				}
				.title {
					flex: 1;
					padding-left: 24rpx;
					height: 72rpx;
					line-height: 36rpx;
					overflow: hidden;
					display: -webkit-box;
					text-overflow: ellipsis;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					font-size: 26rpx;
					color: #333;
				}
				.right_box {
					padding-left: 48rpx;
					text-align: right;
					.pirce {
						font-size: 24rpx;
						color: #000;
						line-height: 34rpx;
					}
					.num {
						font-size: 22rpx;
						color: #666666;
						line-height: 32rpx;
					}
				}
			}
		}

		.bottom_box {
			display: flex;
			flex-wrap: wrap;
			padding-top: 12rpx;
			.flex-item {
				display: flex;
				align-items: center;
				width: 46%;
				height: 34rpx;
				margin-top: 8rpx;
				font-size: 24rpx;
				&:nth-of-type(even) {
					width: 54%;
				}
				.title {
					width: 144rpx;
					text-align: justify;
					text-align-last: justify;
					white-space: nowrap;
					color: #888;
				}
				.content {
					white-space: nowrap;
					color: #333;
				}
				.red {
					color: #ff3f4a;
				}
			}
		}
	}
	.empty {
		padding-top: 40rpx;
		display: flex;
		justify-content: center;
	}
}
</style>
<style>
page {
	background-color: #f4f5f9;
}
</style>
